<template>
    <view class="wrapperBA">
        <view class="main">
            <view class="BA_item_type">
                <view class="title">电梯信息<text>*</text></view>
                <view class="elevatorName" @click="searchElevator">
                    <text>{{ elevatorData.buildingName }}-{{ elevatorData.elevatorAddress }}</text>
                    <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
                </view>
            </view>
            <view style="background-color: #fff; border-radius: 8rpx; margin-bottom: 16rpx;">
                <view class="BA_item_type" style="padding-bottom: 0;">
                    <view class="title">任务类型<text style="color:red;">*</text></view>
                    <view class="btnBox">
                        <view class="btn" :class="{ 'btn_disabled': !detailData.isAllowModify }"
                            v-for="(item, index) in btnBoxLists" :key="index">
                            <view :class="['btnItem', detailData.workOrderType == item.key ? 'btnSel' : '']"
                                @click="selectBtn(item.key, 'workOrderType')">
                                {{ item.label }}</view>
                        </view>
                    </view>
                </view>
                <view class="BA_item_type" style="padding-bottom: 0;">
                    <view class="title">紧急程度<text style="color:red;">*</text></view>
                    <view class="btnBox">
                        <view class="btn" v-for="(item, index) in btnBoxList" :key="index">
                            <view :class="['btnItem', detailData.emerProcType == item.key ? 'btnSel' : '']"
                                @click="selectBtn(item.key, 'emerProcType')">
                                {{ item.label }}</view>
                        </view>
                    </view>
                </view>
                <view class="BA_item_type" style="padding-bottom: 0;">
                    <view class="title">报障电梯状态<text>*</text></view>
                    <helangcheckbox class="helange-btns" ref="checkStatus" :isShows="true" keyName="faultArr"
                        @change="onChange" />
                </view>
            </view>
            <view class="BA_item_info" v-if="detailData.faultMessageList && detailData.faultMessageList.length >= 1">
                <view style="display: flex;align-items: center;justify-content: space-between; margin-bottom: 20rpx;">
                    <view class="info_head">故障描述<text>*</text>
                    </view>
                    <!--
                    <view style="display: flex;align-items: center;">
                        <view :class="['radio', isOpen ? 'selected' : '']" @click="openPart" v-if="index == 0">
                            <view :class="[isOpen ? 'right-check right-bg' : 'right-check']"></view>
                            报电梯部件故障
                        </view>
                        <image v-if="detailData.faultMessageList.length > 1" src="@/static/images/delete.png"
                            @click="delMsg(index)" style="width: 32rpx;height: 32rpx;cursor: pointer;margin-left: 20rpx;">
                        </image>
                    </view>
                    -->
                </view>
                <!-- 
                <view class="item_partsModel">
                    <view class="title">报障人<text style="color:red;">*</text></view>
                    <view class="partsNumber_input">
                        <input type="text" placeholder="请输入报障人" v-model="item.name" placeholder-style="color:#ccc"
                            :disabled="false" />
                    </view>
                </view>
                <view class="item_partsModel">
                    <view class="title">联系电话<text style="color:red;">*</text></view>
                    <view class="partsNumber_input">
                        <input type="text" placeholder="请输入联系电话" v-model="item.phone" placeholder-style="color:#ccc"
                            :disabled="false" />
                    </view>
                </view>
                -->
                <view class="btnBox">
                    <view class="btn">
                        <view :class="['btnItem', !isOpen ? 'btnSel' : '']" @click="comfire">整梯报障</view>
                    </view>
                    <view class="btn">
                        <view :class="['btnItem', isOpen ? 'btnSel' : '']" @click="comfire">部件报障</view>
                    </view>
                </view>
                <view v-for="(item, index) in detailData.faultMessageList" :key="index">
                    <block v-if="isOpen || (!isOpen && index == 0)">
                        <view style="display: flex;align-items: center;justify-content: space-between;" v-if="isOpen">
                            <view class="serial-num">{{ index + 1 }}</view>
                            <view v-if="detailData.faultMessageList.length > 1"
                                style="display: flex;align-items: center;">
                                <image src="@/static/images/delete.png" @click="delMsg(index)" style="
                                width: 32rpx;
                                height: 32rpx;
                                cursor: pointer;
                                margin-left: 20rpx;
                                "></image>
                                <view style="color: #E02020; font-size: 24rpx; margin-left: 8rpx;">删除</view>
                            </view>
                        </view>
                        <view class="item_partsModel" v-if="!isOpen">
                            <view class="title">故障现象<text style="color:red;">*</text></view>
                            <view class="falutContent">
                                <view class="falutItemBox" v-for="(it, i) in falutList" :key="it.dictKey">
                                    <view :class="[
                                        'falutItem',
                                        item.problemItem.includes(it.dictKey) ? 'active' : '',
                                    ]" @click="clickFaultItem(item, it, i)">
                                        {{ it.dictValue }}
                                    </view>
                                </view>
                            </view>
                            <input type="text" v-if="item.problemItem.includes(otherId)" placeholder="请输入其他故障现象"
                                class="other" v-model="item.problemOtherDesc" />
                        </view>
                        <view v-else class="item_partsModel" style="margin-bottom: 20rpx;">
                            <view class="title">电梯部件<text style="color:red;">*</text></view>
                            <view class="partsNumber_select" @click="selectPartsClick(index)">
                                <view class="innerText" :style="item.partsName ? 'color:#333' : ''">
                                    {{ item.partsName || '请选择配件' }}
                                    <text v-if="item.floorStandNames">({{ item.floorStandNames.replaceAll(',', '>')
                                        }})</text>
                                </view>
                                <view class="downs"><text></text></view>
                            </view>

                        </view>
                        <view style="display: flex; justify-content: space-between; align-items: center">
                            <view class="title">故障描述<text style="color: red">*</text></view>
                            <view style="font-size: 24rpx; color: #999999; margin-top: 10rpx">故障描述或者故障图片/视频其中一项必须填写
                            </view>
                        </view>
                        <view class="areaBox">
                            <textarea v-model="item.mfDesc" @blur="bindTextAreaBlur(item, $event)" maxlength="300"
                                placeholder="请输入故障描述" />
                            <view class="info_num" :style="{ color: item.NumStr >= 300 ? '#e02020;' : '#666666;' }">{{
                                item.NumStr
                            }}/300
                            </view>
                        </view>
                        <view class="info_img" v-if="item.mfImgUrl">
                            <view style="color: #666;font-size: 28rpx;margin-bottom: 20rpx;">上传故障图片/视频({{
                                item.mfImgUrl.length }}/9)
                            </view>
                            <imageDragSort max="9" :list="item.mfImgUrl" @changeList="changeImg(item, $event)"
                                tips="上传图片" @getPopUpVisible="getPopUpVisible">
                            </imageDragSort>
                            <text v-if="item.tipsState">必须提交描述或者故障图片/视频其中一项，方能提交</text>
                        </view>
                    </block>
                </view>
            </view>
            <view class="addMessage" v-if="isOpen" @click="addMsg">
                <image src="@/static/images/addService.png"></image>
                <view class="label">添加报障部件</view>
            </view>
            <view class="BA_item_botm" @click="submitClicksr">
                <view class="botm">确认修改</view>
            </view>
        </view>

        <model title=" " comfireTxt="确认" :maskClick="false" @cancle="visibleShow = false" @comfire="comfire"
            :visible="visibleShow">
            <view style="text-align: center">
                <view style="color: #333; font-size: 24rpx">{{ isOpen ? '是否不再对电梯部件进行故障描述？' : '是否对电梯部件进行故障描述？' }}</view>
                <view style="color: #E02020; padding-top: 10rpx; font-size: 24rpx">注:点击确认后，原本所输入的信息将被清空</view>
            </view>
        </model>
        <previewMedia ref="previewMedia"></previewMedia>
    </view>
</template>

<script>

import { problemItem, malfunctionEdit, } from '@/apis/barrierSearch.js';
import { throttle, hanleToken } from '@/utils/utils.js';
import { mapState, mapActions } from 'vuex';
import { repairPlanDetailNew, } from '@/apis/approve.js';
import { getIsCheckPlan } from '@/apis/workOrder.js';

import helangcheckbox from '@/components/helang-checkbox/helang-checkbox.vue';
import imageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import unipopup from '@/components/uni-popup/uni-popup';
import model from '@/components/model/index.vue';
function isValid(val) {
	let phone = /^1(3|4|5|6|7|8|9)\d{9}$/;
	let tel = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{4,8}$/;
	if (phone.test(val) || tel.test(val)) {
		return true;
	}
	return false;
}
export default {
	name: 'barrierPage',
	data() {
		return {
			objData: {},
			securityArr: {}, // 安全类
			faultArr: {}, // 电梯状态
			btnStatus: false, //
			falutActive: '',
			showSubmit: true,
			otherId: '',
			fromPlanId: '', // 救援 工单号
			elevatorData: {},  // 修改报障信息 电梯数据
			detailData: {}, // 报障数据
			btnBoxLists: [  // 任务类型标签
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '内部整改', key: '1', },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '客户报障', key: '2', },
			],
			btnBoxList: [  // 紧急程度标签
				{ color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1', },
				{ color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: '2', },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '普通', key: '3', },
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4', },
			],
			isOpen: false,
			partIndex: 0,
			visibleShow: false,
			disabledState: false,// 是否为质检整改维修
			allWorks: [],// 缓存整梯报障数据
			unitWorks: [],// 缓存部件报障数据
			disabledStatusText: '当前任务为质检整改维修,无法修改电梯信息',
		};
	},
	components: {
		helangcheckbox,
		imageDragSort,
		unipopup,
		model,
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	async onLoad(opt) {
		this.elevatorData = { ...opt };
		uni.showLoading({
			title: '加载中',
			icon: 'none',
		});
		Promise.all([
			getIsCheckPlan({ planId: opt.planId,type: 3 }),// 救援：3
			getIsCheckPlan({ planId: opt.planId,type: 6 }),// 质检 ：6
		]).then(([res, res2]) => {
			if (res && res2) {
				let text1 = '当前任务为质检整改维修,无法修改电梯信息';
				let text2 = '当前任务为救援维修,无法修改电梯信息';
				this.disabledStatusText = res.data ? text2 : text1;
				this.disabledState = res.data || res2.data;
			}
		});
		// getIsCheckPlan({ planId: opt.planId }).then((res) => {
		// 	if (res) {
		// 		this.disabledState = res.data;
		// 	}
		// });
		this.getProblemItem();
		repairPlanDetailNew({ planId: opt.planId }).then((res) => {
			if (res) {
				this.$refs.checkStatus.set({
					type: 'radio',
					index: res.data.elevatorStop - 1,
					list: [
						{ id: 1, dictValue: '正常运行' },
						{ id: 2, dictValue: '停梯' },
					],
				});
				res.data.faultMessageList.forEach(item => {
					if (item.partsName) {
						item.partsNames = item.partsName.split('>').join('&&');
						this.isOpen = true;
					} else {
						this.isOpen = false;
						item.problemItem = item.problemItem.split(',');
					}
					item.showCustom = false;
					item.tipsState = false;
					item.NumStr = item.mfDesc ? item.mfDesc.length : 0;
					item.partsSelectArr = [];
					item.customArrs = [];
				});
				this.detailData = res.data;
				uni.hideLoading();
			}
		});

		// #ifdef H5
		setTimeout(() => {
			uni.$on('part-selectd', (res) => {
				this.partsSubmit(res);
			});
		}, 1000);
		// #endif

		// #ifndef H5
		uni.$on('part-selectd', (res) => {
			this.partsSubmit(res);
		});
		// #endif

		await this.handleRreshToken();
	},
	watch: {
		// problemItem: {
		//     deep: true,
		//     handler(newVal, oldVal) {
		//         // console.log(newVal)
		//         if (this.otherId && !newVal.includes(this.otherId)) {
		//             this.problemOtherDesc = "";
		//         }
		//     },
		// },
	},
	onShow() {
		if (uni.getStorageSync('elevatorData')) {
			this.elevatorData = uni.getStorageSync('elevatorData');
			uni.setStorageSync('elevatorData', '');
		}
	},
	onUnload() {
		uni.$off('part-selectd');
	},
	methods: {
		...mapActions('user', ['handleRreshToken']),
		openPart() {
			this.visibleShow = true;
		},
		comfire() {
			// 缓存数组
			if (this.isOpen) {
				this.unitWorks = JSON.parse(JSON.stringify(this.detailData.faultMessageList));
			} else {
				this.allWorks = JSON.parse(JSON.stringify(this.detailData.faultMessageList));
			}
			let unitWorksNull = (this.unitWorks.length === 0);
			let allWorksNull = (this.allWorks.length === 0);
			if (unitWorksNull || allWorksNull) {
				this.detailData.faultMessageList = [
					{
						name: this.userinfo.nick_name,
						phone: this.userinfo.phone,
						mfImgUrl: [],
						mfDesc: '', // 故障描述
						problemItem: [], // 选择故障现象的集合
						problemOtherDesc: '',
						NumStr: 0, // 字符数量
						tipsState: false, // 提示验证
						partsSelectArr: [], // 配件数据
						customArrs: [],
						partsNames: '',
						showCustom: false,
					},
				];
				if (unitWorksNull) {
					this.unitWorks = JSON.parse(JSON.stringify(this.detailData.faultMessageList));
				} else {
					this.allWorks = JSON.parse(JSON.stringify(this.detailData.faultMessageList));
				}
			}
			this.isOpen = !this.isOpen;
			this.detailData.faultMessageList = JSON.parse(JSON.stringify((this.isOpen ? this.unitWorks : this.allWorks)));
			return;
			// 旧逻辑
			this.detailData.faultMessageList = [{
				name: '',
				phone: '',
				mfImgUrl: [],
				mfDesc: '', // 故障描述
				problemItem: [], // 选择故障现象的集合
				problemOtherDesc: '',
				NumStr: 0, // 字符数量
				tipsState: false, // 提示验证
				partsSelectArr: [], // 配件数据
				customArrs: [],
				partsNames: '',
				partsNameother: '',
				showCustom: false,
			}];
			this.visibleShow = false;
			this.isOpen = !this.isOpen;
		},
		// 删除配件描述
		delMsg(index) {
			this.detailData.faultMessageList.splice(index, 1);
		},
		// 添加电梯配件描述
		addMsg() {
			if (this.detailData.faultMessageList.length >= 10) {
				uni.showToast({
					title: '故障描述最多添加10条',
					icon: 'none',
				});
				return;
			}
			this.detailData.faultMessageList.push(
				{
					name: this.userinfo.nick_name,
					phone: this.userinfo.phone,
					mfImgUrl: [],
					mfDesc: '', // 故障描述
					problemItem: [], // 选择故障现象的集合
					problemOtherDesc: '',
					NumStr: 0, // 字符数量
					tipsState: false, // 提示验证
					partsSelectArr: [], // 配件数据
					customArrs: [],
					partsNames: '',
					partsNameother: '',
					showCustom: false,
				}
			);
		},
		// 配件搜索选择确定
		partsSubmit(res) {
			let names = res.names;
			let ids = res.ids;
			if (res.flag && res.flag.id) {
				this.detailData.faultMessageList[this.partIndex].floorStandIds = res.flag.ids.join(',');
				this.detailData.faultMessageList[this.partIndex].floorStandNames = res.flag.names.join(',');
			} else {
				delete this.detailData.faultMessageList[this.partIndex].floorStandIds;
				delete this.detailData.faultMessageList[this.partIndex].floorStandNames;
			}
			this.detailData.faultMessageList[this.partIndex].partsIds = ids.join(',');
			this.detailData.faultMessageList[this.partIndex].partsSelectArr = ids;
			this.detailData.faultMessageList[this.partIndex].other = res.other || '';
			this.detailData.faultMessageList[this.partIndex].partsNames = names.join('&&');
			this.detailData.faultMessageList[this.partIndex].partsName = names.join('>');
		},
		resStr(str, num = 25) {
			return str && str.length > num ? str.substring(0, num) + '...' : str;
		},

		// 选择紧急程度和任务类型
		selectBtn(val, key) {
			console.log(this.detailData.isAllowModify, 'this.detailData.isAllowModify');
			if (key === 'workOrderType' && !this.detailData.isAllowModify) {
				return;
			}
			this.detailData[key] = val;
		},
		// 选择配件
		selectPartsClick(index) {
			this.partIndex = index;
			let disabledArr = [];
			if (this.detailData.faultMessageList.length > 1) {
				disabledArr = this.detailData.faultMessageList.map(item => {
					if (item.partsIds) {
						return {
							floorStandIds:item.floorStandIds,
							partsIds: item.partsIds.split(','),
							partsNames: item.partsName ? item.partsName.split('>') : []
						};
					} else {
						return {
							partsIds: [],
							partsNames: []
						};
					}
				});// 禁止选择 已存在的部件
			}
			uni.navigateTo({
				url: '/pages/pubilc/partSelect?disabledArr=' + JSON.stringify(disabledArr) + '&elevatorId=' + this.elevatorData.elevatorId,
				fail: (fail) => {
					console.log(fail);
				},
			});
		},
		getPopUpVisible(e) {
			this.showSubmit = !e;
		},
		submitClicksr: throttle(function () {
			uni.showModal({
				title: '修改提示',
				content: '是否确认修改报障信息?',
				success: (res) => {
					if (res.confirm) {
						if (!this.detailData.workOrderType) {
							uni.showToast({
								title: '请选择任务类型',
								icon: 'none',
							});
							return;
						}
						if (!this.detailData.emerProcType) {
							uni.showToast({
								title: '请选择紧急程度',
								icon: 'none',
							});
							return;
						}
						if (this.btnStatus) {
							return;
						}
						for (let index = 0; index < this.detailData.faultMessageList.length; index++) {
							const item = this.detailData.faultMessageList[index];
							if (!item.name) {
								uni.showToast({
									title: '请输入报障人',
									icon: 'none',
								});
								return;
							}
							if (!isValid(item.phone)) {
								uni.showToast({
									title: '请正确输入手机号',
									icon: 'none',
								});
								return;
							}
							if (!this.isOpen && !item.problemItem.length) {
								uni.showToast({
									title: '请选择故障现象',
									icon: 'none',
								});
								return;
							}
							if (this.isOpen && item.partsIds && item.partsIds.length == 0) {
								uni.showToast({
									title: '请选择电梯部件',
									icon: 'none',
								});
								return;
							}
							if (!this.isOpen && item.problemItem.includes(this.otherId)) {
								if (!item.problemOtherDesc) {
									uni.showToast({
										title: '请填写其他故障现象',
										icon: 'none',
									});
									return;
								}
							}
							if (item.mfImgUrl.length <= 0 && item.NumStr == 0) {
								item.tipsState = true;
								return;
							}
						}
						this.detailData.faultMessageList.forEach(item => {
							delete item.id; // 编辑不需要id 否则报错
							if (!this.isOpen) {
								item.problemItem = item.problemItem.join(',');
							} else if (item.partsSelectArr && item.partsSelectArr.length > 0) {
								delete item.problemItem;
							}
							if (!this.isOpen && item.problemItem.includes(this.otherId)) {
								item.problemOtherDesc = item.problemOtherDesc;
							} else {
								delete item.problemOtherDesc;
							}
							item.planFrom = 5; // 默认维保端报障
						});
						uni.showLoading({
							title: '提交中',
							mask: true,
						});
						let str = this.elevatorData.buildingName + this.elevatorData.elevatorAddress;
						const params = {
							planId: this.elevatorData.planId,
							fromPlanId: this.fromPlanId || '',
							address: str || '',
							elevatorId: this.elevatorData.elevatorId,
							elevatorStop: this.faultArr.id || this.detailData.elevatorStop,
							typeStatus: this.securityArr.id || 2,
							workOrderType: this.detailData.workOrderType,
							emerProcType: this.detailData.emerProcType,
							works: this.detailData.faultMessageList,
							sourcePlanType: this.detailData.workOrderType == 1 ? (this.detailData.sourcePlanType || 2) : null
						};
						malfunctionEdit(params).then((res) => {
							if (res.code === 200) {
								uni.hideLoading();
								uni.showToast({
									title: '修改成功',
									icon: 'none',
								});
								for (let i = 0; i < params.works.length; i++) {
									if (params.works[i].other) {
										let partsIds = params.works[i].partsIds.split(',');
										this.addCustompartslog({
											partId: partsIds[partsIds.length - 1],
											other: params.works[i].other,
											planId: this.elevatorData.planId || '',
											fromLocation: 'pages/approve/repairHurdle',
										});
									}
								}

								setTimeout(() => {
									uni.setStorageSync('elevatorData', this.elevatorData);
									uni.navigateBack();
								}, 600);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								});
							}
						}).finally(() => {
							this.btnStatus = true;
						});
					}
				},
			});
		}, 600),
		// 选项切换事件
		onChange(data, keyName) {
			let reData = data || {};
			switch (keyName) {
			case 'security':
				this.securityArr = reData;
				break;
			case 'faultArr':
				this.faultArr = reData;
				break;
			default:
				break;
			}
		},
		// 文本输入框
		bindTextAreaBlur(item, e) {
			if (e.detail.value) {
				item.mfDesc = e.detail.value;
			}
			item.tipsState = false;
			item.NumStr = this.bindTexStr(e.detail.value, 250);
		},
		bindTexStr(str, maxlength) {
			var result = '';
			if (str && str.length > maxlength) {
				result = maxlength;
			} else {
				result = str.length;
			}
			return result;
		},
		// 图片上传
		changeImg(item, imgArr = []) {
			item.mfImgUrl = imgArr;
			item.tipsState = false;
		},
		// 点击现象选择
		clickFaultItem(item, it, i) {
			if (!item.problemItem.includes(it.dictKey)) {
				item.problemItem.push(it.dictKey);
			} else {
				let faultIndex = item.problemItem.findIndex((e) => e == it.dictKey);
				item.problemItem.splice(faultIndex, 1);
			}
		},
		// 获取现象集合
		getProblemItem() {
			problemItem({}).then((res) => {
				if (res) {
					console.log(res, '集合');
					this.falutList = res.data;
					this.otherId = this.falutList.find(
						(item) => item.dictValue === '其他'
					).dictKey;
				}
			});
		},
		// 重新选择电梯
		searchElevator() {
			if (this.disabledState) {
				uni.showModal({
					title: '提示',
					          content: this.disabledStatusText,
					showCancel: false,
					success: (res) => { }
				});
				return;
			}
			uni.navigateTo({
				url: '/pageModules/barrierSearch/searchBg?isEdit=' + true + '&data=' + JSON.stringify(this.elevatorData)
			});
		},
	},
};
</script>

<style lang="scss" scoped>
page {
    background: #f3f6f8;
}

%widthMargin {
    width: 720rpx;
    margin: 0 auto;
}

.wrapperBA {
    height: calc(100vh - 100rpx);
    overflow-y: auto;
    overflow-x: hidden;

    .main {
        background: #f3f6f8;
        padding: 16rpx 20rpx;
    }

    .serial-num {
        width: 40rpx;
        line-height: 40rpx;
        height: 40rpx;
        text-align: center;
        background: #dcf0ff;
        border-radius: 0px 0px 4rpx 4rpx;
        font-size: 24rpx;
        color: #0091FF;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .BA_item_type {
        background-color: #ffffff;
        padding: 20rpx 20rpx 32rpx 20rpx;
        margin-bottom: 16rpx;
        border-radius: 8rpx;

        .elevatorName {
            border: 1px solid #ccc;
            padding: 10rpx;
            border-radius: 8rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: #333333;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            &::before {
                content: '';
                display: inline-block;
                width: 4rpx;
                height: 32rpx;
                background-color: #0091ff;
                margin-right: 10rpx;
            }

            text {
                color: red;
            }
        }

    }

    .btnBox {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .btn {
            width: 0;
            flex: 0 0 152rpx;
            border-radius: 4px;
            height: 48rpx;
            line-height: 48rpx;
            margin-bottom: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
        }

        .btn:nth-last-child(1) {
            margin-right: 0;
        }

        // .btn:nth-child(3n-1) {
        //     justify-content: center;
        // }

        // .btn:nth-child(3n + 3) {
        //     justify-content: flex-end;
        // }

        .btnItem {
            // border: 2rpx solid #cccccc;
            background-color: #dcf0ff;
            border-radius: 8rpx;
            color: #0091FF;
            font-size: 26rpx;
            width: 100%;
            line-height: 48rpx;
            height: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btnSel {
            // border: 2rpx solid #0091FF;
            background-color: #0091ff !important;
            color: #ffffff !important;
        }

        .btn_disabled {
            .btnItem {
                color: #bcbec2;
                background: #f4f4f5;
            }
        }
    }

    .addMessage {
        width: 320rpx;
        margin: auto;
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            width: 24rpx;
            height: 24rpx;
            margin-right: 10rpx;
        }

        .label {
            font-size: 28rpx;
            color: #0091FF;
        }
    }

    .BA_item_info {
        margin-top: 20rpx;
        padding: 24rpx 20rpx 20rpx 20rpx;
        background-color: #ffffff;

        .selected {
            border-color: #0091FF !important;
            color: #0091FF !important;
        }

        .radio {
            display: flex;
            align-items: center;
            border: 2rpx solid #cccccc;
            border-radius: 8rpx;
            padding: 4rpx 10rpx;
            color: #666;

            .right-check {
                width: 30rpx;
                height: 30rpx;
                border-radius: 50%;
                border: 2rpx #CCCCCC solid;
                margin-right: 10rpx;
            }

            .right-bg {
                border: none;
                // background-color: #0091FF;
                background: url("https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/%E4%B8%8B%E8%BD%BD.png");
                background-size: 32rpx 32rpx;
                background-repeat: no-repeat;
            }
        }

        .item_partsModel {
            margin-top: 20rpx;

            .title {
                font-size: 28rpx;
                color: #666666;
                margin: 20rpx 0;
            }

            .partsNumber_select {
                display: flex;
                flex-direction: row;
                margin-bottom: 32rpx;
                padding: 10rpx 20rpx;
                border: 2rpx solid #e9e9e9;
                border-radius: 8rpx;

                .innerText {
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFangSC-Regular;
                    font-weight: 400;
                    text-align: left;
                    align-items: center;
                    color: #cccccc;
                    line-height: 40rpx;
                    width: 80%;
                }

                .downs {
                    width: 40rpx;
                    margin-left: auto;

                    text {
                        display: inline-block;
                        width: 16rpx;
                        height: 16rpx;
                        border-bottom: 2rpx #ccc solid;
                        border-left: 2rpx #ccc solid;
                        transform: rotate(-45deg);
                    }
                }
            }

            .partsNumber_input {
                width: 630rpx;
                border: 2rpx solid #e9e9e9;
                border-radius: 8rpx;
                padding: 10rpx 20rpx;
            }

            .falutContent {
                display: flex;
                flex-wrap: wrap;
            }

            .falutItemBox {
                display: flex;
                width: 33.3%;
                margin-bottom: 20rpx;
            }

            .falutItemBox:nth-child(3n-1) {
                justify-content: center;
            }

            .falutItemBox:nth-child(3n + 3) {
                justify-content: flex-end;
            }

            .falutItem {
                border: 2rpx solid #cccccc;
                border-radius: 8rpx;
                color: #666;
                font-size: 26rpx;
                width: 216rpx;
                height: 48rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .active {
                color: #0091ff;
                border-color: #0091ff;
            }

            .other {
                width: 670rpx;
                height: 72rpx;
                border: 2rpx solid #e9e9e9;
                border-radius: 4rpx;
                padding-left: 28rpx;
                box-sizing: border-box;
            }
        }

        .info_head {
            font-size: 32rpx;
            font-weight: 600;
            color: #333333;
            display: flex;
            align-items: center;

            &::before {
                content: '';
                display: inline-block;
                width: 4rpx;
                height: 32rpx;
                background-color: #0091ff;
                margin-right: 10rpx;
            }

            text {
                color: red;
            }
        }

        .areaBox {
            padding: 20rpx 24rpx;
            border: 2rpx solid #e9e9e9;
            border-radius: 8rpx;
            margin-top: 20rpx;
        }

        .info_num {
            text-align: right;
            font-size: 24rpx;
            font-weight: 400;
            color: #666666;
        }

        .info_img {
            margin-top: 20rpx;

            // display: flex;
            text {
                display: block;
                margin: 10rpx 0;
                font-size: 24rpx;
                font-weight: 400;
                color: #e02020;
            }
        }

        textarea {
            width: 100%;
        }
    }

    .BA_item_person {
        margin-top: 20rpx;
        padding: 24rpx 20rpx 20rpx 20rpx;
        background-color: #ffffff;

        .sign {
            color: #e02020;
        }

        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: #333333;
        }

        .person {
            margin: 30rpx 0;
            display: flex;
            flex-direction: row;

            .personL {
                display: flex;
                align-items: center;
                flex: 1;
                font-size: 28rpx;
                font-weight: 400;
                color: #666666;
            }

            .personR {
                flex: 0 0 500rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #666;
                align-items: center;
                display: flex;
                justify-content: flex-end;

                .rightTo {
                    display: inline-block;
                    width: 16rpx;
                    height: 16rpx;
                    border-bottom: 1rpx #999999 solid;
                    border-right: 1rpx #999999 solid;
                    transform: rotate(-45deg);
                    margin-left: 10rpx;
                }
            }
        }
    }

    .BA_item_tips {
        margin: 20rpx 0 40rpx 0;
        padding: 20rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
    }

    .BA_item_botm {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        height: 98rpx;
        display: flex;
        align-items: center;
        width: 100%;
        background: #fff;

        .botm {
            @extend %widthMargin;
            height: 70rpx;
            background: #0091ff;
            border-radius: 8rpx;
            line-height: 70rpx;
            text-align: center;
            font-size: 28rpx;
            font-weight: 500;
            color: #ffffff;
        }
    }

    .dis_botm {
        .d_botm {
            color: #fff;
            background: #ccc;
        }
    }

    .radioLR {
        display: flex;
        flex-direction: row;

        .radio_R {
            flex: 1;
            display: flex;
            flex-direction: row;
            border-bottom: 2rpx #eeeeee solid;

            view:nth-child(1) {
                flex: 1;
            }
        }
    }

    .radioLR:last-child {
        .radio_R:last-child {
            border-bottom: none;
        }
    }
}

/deep/.helange-btns {
    .container {
        .views {
            width: 0;
            flex: 0 0 152rpx;
            margin-right: 20rpx !important;

            .item {
                border: none;
                background-color: #dcf0ff;
                border-radius: 8rpx;
                color: #0091FF;
                font-size: 26rpx;
                width: 100% !important;
                line-height: 48rpx;
                height: 48rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .active {
                border: none;
                background-color: #0091ff;
                color: #ffffff;
            }
        }
    }
}
</style>
